<template>
  <div class="echarts">
        <div id="chart_example1" style="width: 270px; height: 270px"></div>
        <div id="chart_example2" style="width: 270px; height: 270px"></div>
        <div id="chart_example3" style="width: 270px; height: 270px"></div>
        <div id="chart_example4" style="width: 270px; height: 270px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      text:"地塘块",
      Ktotal: 0,
      Mtotal: 0,
      Ytotal: 0,
      number: 0,
      k: [],
      m: [],
      y: [],
      t: [],
    };
  },
  created(){
    
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      this.$axios.get("rbac/data/statistics/get", { params: {
        systemTypes:localStorage.getItem('SYS_TYPE')
      } }).then((result) => {
        this.text = localStorage.getItem('SYS_TYPE') == 'SS1'?'鱼塘':'地块'
        let k = result.data.list1;
        k.forEach((item) => {
          this.Ktotal += item.value;
        });
        let m = result.data.list2;
        m.forEach((item) => {
          this.Mtotal += item.value;
        });

        let t = result.data.list3;
    
        let y = result.data.list4;
        y.forEach((item) => {
          this.Ytotal += item.value;
        });

        // 基于准备好的dom，初始化echarts实例
        var chartDom1 = document.getElementById("chart_example1");
        var myChart1 = echarts.init(chartDom1);
        var chartDom2 = document.getElementById("chart_example2");
        var myChart2 = echarts.init(chartDom2);
        var chartDom3 = document.getElementById("chart_example3");
        var myChart3 = echarts.init(chartDom3);
        var chartDom4 = document.getElementById("chart_example4");
        var myChart4 = echarts.init(chartDom4);

        // 绘制图表
        myChart1.setOption({
          title: {
            text: this.text+"总数量：" + this.Ktotal + " 块",
            subtext: "各二级地类数量",
            left: "left",
          },
          tooltip: {},

          label: {
            alignTo: "edge",
            formatter: "{name|{b}}\n{time|{c} 块}",
            minMargin: 15,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "50%",
              data: k,
            },
          ],
        });
        myChart2.setOption({
          title: {
            text: this.text+"总面积：" + this.Mtotal.toFixed(3) + " 亩",
            subtext: "各二级地类面积",
            left: "left",
          },
          tooltip: {},
          label: {
            alignTo: "edge",
            formatter: "{name|{b}}\n{time|{c} 亩}",
            minMargin: 15,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "50%",
              data: m,
            },
          ],
        });

        myChart3.setOption({
          title: {
            text: "主体类型分布",
            subtext: "类型说明",
            left: "left",
          },
          tooltip: {},
          label: {
            alignTo: "edge",
            formatter: "{name|{b}}\n{time|{c}}",
            minMargin: 15,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "50%",
              data: t,
           },
          ],
        });
        myChart4.setOption({
          title: {
            text: "辖区"+this.text+"总产值：" + this.Ytotal.toLocaleString()  + " 万元",
            subtext: "各二级地类产值",
            left: "left",
          },
          tooltip: {},
          label: {
            alignTo: "edge",
            formatter: "{name|{b}}\n{time|{c} 万元}",
            minMargin: 15,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "50%",
              data: y,
            },
          ],
        });
      });
    },

    tol() {
      
    },
  },
  watch: {},
  computed: {},
  created() {},
};
</script>

<style lang="scss">
.echarts {
  height:120vh
}
</style>